<template>
	<view>
		<view class="box" v-for="item,index in list" :key="index">
			<label class="radio">
				<radio value="" @click="dx(index)" :checked="item.type"/><text></text>
			</label>
			<view class="">
				<image :src="item.mainPictures[0]" mode=""></image>
			</view>
			
			<view class="">
				<text>{{item.name}}</text>
				<view class="">
					<text>￥{{item.price}}</text>
				</view>
			</view>
			<view class="">
				<uni-number-box v-model="item.count" ></uni-number-box>
			</view>
			
			<button @click="del(index)">删除</button>
			
		</view>
		<view class="bottom">
			<view class="">
				<label class="radio">
					<radio value="" @click="qx" :checked="checkall"/><text>全选</text>
				</label>
			</view>
			
			<view class="price">
				合计：<text class="text">￥{{sum}}</text>
			</view>
			
			<view class="">
				<button>去支付</button>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				list:uni.getStorageSync('cars')||[],//进入页面从本地取出来数据
				checkall:false   //定义全选的状态
			};
		},
		onLoad() {
			// 判断如果全部购物车没有数据全选的状态
			if(this.list.length==0){
				this.checkall==false
			}
		},
		onShow() {
			// 进入页面去除本地的数据
		this.list=uni.getStorageSync('cars')||[]	
		},
		methods:{
			// 点击全选按钮 
			qx(){
				this.checkall= !this.checkall
				this.list.forEach(item=>{
					item.type=this.checkall
				})
			},
			// 点击单选按钮
			dx(index){
				this.list[index].type= !this.list[index].type
				this.checkall=this.list.every(item=>item.type)
			},
			// 点击删除按钮
			del(index){
				this.list.splice(index,1)
				uni.setStorageSync('cars',this.list)
			}
		},
		computed:{
		// 选中的计算价格
			sum(){
				let num = 0
				this.list.forEach(item=>{
					if(item.type){
						num += item.count * item.price
					}
				})
				return num
			}
		}
	}
</script>

<style lang="scss">
.box{
	display: flex;
	padding: 20rpx;
	image{
		width: 200rpx;
		height: 200rpx;
	}
	button{
		width: 260rpx;
		height: 50%;
		margin-top: 50rpx;
	}
}

.bottom{
	position: fixed;
	width: 100%;
	height: 100rpx;
	line-height: 50rpx;
	padding: 20rpx;
	box-sizing: border-box;
	bottom: 0;
	display: flex;
	background-color: red;
	font-size: 28rpx;
	view{
		width: 33%;
		height: 100%;
	}
	.price{
		margin-left: 150rpx;
		margin-right: 20rpx;
		.text{
			color: res;
		}
	}
	button{
		background-color: orangered;
		border-radius: 80rpx;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
	}
}


</style>

